import React, { Component } from "react";
import { Checkbox, Menu, Icon } from "antd";
import "styles/row-card/row-card-UI.scss";

const { Group } = Checkbox;

class RowCardUI extends Component {
  constructor(props) {
    super(props);
    const { checkBoxValues = [] } = props;
    this.state = {
      selectedKeys: checkBoxValues[0],
    };
  }

  componentDidMount() {
    const { dataSource, onRowSelect } = this.props;
    dataSource.length > 0 && onRowSelect && onRowSelect(dataSource[0], 0);
  }

  //点击具体的菜单
  handleClick = ({ key }) => {
    this.setState({ selectedKeys: key });
  };

  render() {
    const { selectedKeys } = this.state;
    const {
      searchStatus,
      search,
      dataSource = [],
      rows = [],
      rowSelection,
      onRowCopy,
      onRowDel,
      onRowEdit,
      onRowSelect,
      onChange,
      checkedList,
      checkBoxValues,
      onSelect,
    } = this.props;
    return (
      <div className={`row-card-ui ${rowSelection ? "row-card-ui-footer" : ""}`}>
        {searchStatus ? search : null}
        <Group onChange={onChange} value={checkedList}>
          <Menu onClick={this.handleClick} mode="inline" selectedKeys={[selectedKeys]}>
            {dataSource.map((item, index) => {
              const objectString = checkBoxValues[index];
              return (
                <Menu.Item key={objectString}>
                  <div
                    className={`row-card-check ${selectedKeys === objectString ? "active" : ""}`}
                    onClick={() => onRowSelect(item, index)}
                  >
                    {rowSelection && <Checkbox value={objectString} onChange={(val) => onSelect(val, item, index)} />}
                    <div>
                      <div className="row-card-content">
                        {rows.map((it, idx) => (
                          <p key={it.dataIndex}>
                            {it.title}: {it.render ? it.render(item[it.dataIndex], item, index) : item[it.dataIndex]}
                          </p>
                        ))}
                      </div>
                    </div>
                    <div className="content-icon">
                      {onRowCopy && <Icon type="copy" onClick={() => onRowCopy(item, index)} />}
                      {onRowEdit && <Icon type="edit" onClick={() => onRowEdit(item, index)} />}
                      {onRowDel && <Icon type="delete" onClick={() => onRowDel(item, index)} />}
                    </div>
                  </div>
                </Menu.Item>
              );
            })}
          </Menu>
        </Group>
      </div>
    );
  }
}

export default RowCardUI;
